<template>
  <div class="productionDesign_box myStyle">
    <div id="tags-view-container" class="tags-view-container">
      <div class="tags-view-wrapper">
        <router-link ref="tag" tag="span" class="tags-view-item active" :to="{ path: 'index' }">
          电能/水能消耗详情
          <span class="el-icon-close" @click="$router.push('/index')" />
        </router-link>
      </div>
    </div>
    <div class="content">
      <div class="content_top">
        <StrokeTitle title="电能统计" class="float margin" style="width: 49%">
          <div class="flex_center">
            <ElementRadio :options="RadioOptions" v-model="model" :isButton="true" @change="radioChange" />
          </div>
          <div class="Echarts flex_center">
            <div class="dianLeft flex_center_direction background_181">
              <div class="top flex_center_direction big_background">
                <div class="number text_shadow">
                  {{ $formatNum("232411324") }}
                </div>
                <div class="title te_-shadow_danger">总消耗</div>
              </div>
              <div class="bottom flex_center">
                <div class="item background flex_center_direction">
                  <div class="number text_shadow">
                    {{ $formatNum("232432") }}
                  </div>
                  <div class="title te_-shadow_danger">上期</div>
                </div>
                <div class="item background flex_center_direction">
                  <div class="number text_shadow">
                    {{ $formatNum("232432") }}
                  </div>
                  <div class="title te_-shadow_danger">上期环比</div>
                </div>
              </div>
            </div>
             <PieImg style="width: 62%" itemWidth="0.9" :cirLeft="0.6" legendType="" legendLeft="44%" length="8"/>
          </div>
        </StrokeTitle>
        <StrokeTitle title="水能统计" class="float margin" style="width: 49%">
          <div class="flex_center">
            <ElementRadio :options="RadioOptions" v-model="model" :isButton="true" @change="radioChange" />
          </div>
          <div class="Echarts flex_center">
            <div class="dianLeft flex_center_direction background_181">
              <div class="top flex_center_direction big_background">
                <div class="number text_shadow">
                  {{ $formatNum("233324324") }}
                </div>
                <div class="title te_-shadow_danger">总消耗</div>
              </div>
              <div class="bottom flex_center">
                <div class="item background flex_center_direction">
                  <div class="number text_shadow">
                    {{ $formatNum("232432") }}
                  </div>
                  <div class="title te_-shadow_danger">上期</div>
                </div>
                <div class="item background flex_center_direction">
                  <div class="number text_shadow">
                    {{ $formatNum("232432") }}
                  </div>
                  <div class="title te_-shadow_danger">上期环比</div>
                </div>
              </div>
            </div>
             <PieImg style="width: 62%" itemWidth="0.9" :cirLeft="0.6" legendType="" legendLeft="44%" length="8"/>
          </div>
        </StrokeTitle>
      </div>
      <div class="content_top">
        <StrokeTitle title="电能分配统计" class="float margin" style="width: 32.33%">
          <div class="flex_center">
            <ElementRadio :options="RadioOptions" v-model="model" :isButton="true" @change="radioChange" />
            <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList" />
          </div>
          <div class="Echarts">
            <div class="calculagraph_left">
              <PieImg :isLenged="false" itemWidth="0.95"/>
            </div>
            <div class="calculagraph_right flex_center_direction">
              <div class="calculagraph_right_item flex_center">
                <img src="../../assets/images/echarts/dian1.png" alt="" />
                <div class="right flex_center_direction">
                  <div class="title">生产用电 {{ 75 }}%</div>
                  <div class="number text_shadow_yellow">
                    {{ $formatNum("232432") }}
                  </div>
                </div>
              </div>
              <div class="calculagraph_right_item calculagraph_right_orange flex_center">
                <img src="../../assets/images/echarts/dian2.png" alt="" />
                <div class="right flex_center_direction">
                  <div class="title">生活用电 {{ 75 }}%</div>
                  <div class="number text_shadow_orange">
                    {{ $formatNum("232432") }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </StrokeTitle>
        <StrokeTitle title="用电高峰期" class="float margin" style="width: 32.33%">
          <div class="flex_center">
            <ElementRadio :options="RadioOptions" v-model="model" :isButton="true" @change="radioChange" />
            <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList" />
          </div>
          <div class="flex_center Echarts">
            <Rank />
          </div>
        </StrokeTitle>
        <StrokeTitle title="用水高峰期" class="float margin" style="width: 32.33%">
          <div class="flex_center">
            <ElementRadio :options="RadioOptions" v-model="model" :isButton="true" @change="radioChange" />
            <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList" />
          </div>
          <div class="flex_center Echarts">
            <Rank />
          </div>
        </StrokeTitle>
      </div>
      <div class="content_top">
        <StrokeTitle title="当年十二月用电趋势分析" class="float margin" style="width: 49%">
          <div class="flex_center">
            <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList" />
          </div>
          <div class="Echarts">
            <ELine />
          </div>
        </StrokeTitle>
        <StrokeTitle title="当年十二月用水趋势分析" class="float margin" style="width: 49%">
          <div class="flex_center">
            <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList" />
          </div>
          <div class="Echarts">
            <ELine />
          </div>
        </StrokeTitle>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: "month",
      RadioOptions: [
        {
          value: "month",
          label: "当月",
        },
        {
          value: "year",
          label: "当季",
        },
        {
          value: "zi",
          label: "自定义",
        },
      ],
      selectList: [
        { value: "", label: "全部" },
        { value: "1", label: "选项一" },
      ],
      data3: [
        { name: "已签收", value1: 33 },
        { name: "配送中", value1: 53 },
        { name: "已出库", value1: 78 },
        { name: "采购中", value1: 12 },
        { name: "接单中", value1: 90 },
      ],
    };
  },
  methods: {
    radioChange() {},
  },
};
</script>


<style lang="scss" scoped>
.productionDesign_box {
  .content {

    .content_top {
      //   background: red;
      width: 100%;
      height: 30.8%;
    }
    .Echarts {
      height: calc(100% - 50px);
      .dianLeft {
        width: 26%;
        margin: 0 2%;
        height: 90%;
        padding: 15px 9px;
        justify-content: space-between;
        .top,
        .bottom {
          width: 100%;
          height: 47%;
          .number {
            font-size: 25px;
            font-family: SimHei, SimHei-Regular;
            font-weight: 400;
            // text-align: center;
          }
          .title {
            font-size: 12px;
            font-family: Source Han Sans CN, Source Han Sans CN-Normal;
            font-weight: Normal;
            // text-align: center;
            color: #c1f0fe;
          }
        }
        .bottom {
          justify-content: space-between;
          .item {
            height: 100%;
            width: 49%;
          }
        }
      }
      .calculagraph_right,
      .calculagraph_left {
        width: 40%;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        float: left;
        margin-left: 8%;
      }
      .calculagraph_right {
        width: 32%;
        height: 86%;
        margin-left: 0%;
        margin-top: 2%;
        .calculagraph_right_item {
          width: 100%;
          height: 47%;
          max-height: 66px;

          background-image: url("../../assets/images/echarts/ju1.png");
          background-color: rgba(255, 255, 0, 0.1);
          background-size: 100% 100%;
          .right {
            width: 60%;
            .title {
              font-size: 13px;
              font-family: Source Han Sans CN, Source Han Sans CN-Normal;
              font-weight: Normal;
              color: #c1f0fe;
            }
            .number {
              font-size: 25px;
              font-family: SimHei, SimHei-Regular;
              font-weight: 400;
            }
          }
        }
        .calculagraph_right_orange {
          width: 100%;
          background-image: url("../../assets/images/echarts/ju2.png");
          background-color: rgba(231, 143, 18, 0.1);
          background-size: 100% 100%;
          margin-top: 4%;
        }
      }
    }
  }
}
</style>